<template>
    <div>
        <strong @click="exit">
                <i>EXIT</i>
        </strong> 
    </div>
</template>

<script>
export default {
    data () {
        return {
        }
    },
    methods:{
        exit(){
            localStorage.removeItem('token')
        }
    }
}
</script>
 
<style lang = "less" scoped>
    strong{
            i{
                line-height: 100px;
                position: absolute;
                right: 0;
                top: -10px;
                transition: all 1s;
                opacity: 0;
            }
            position: fixed;
            top: -50px;
            left: -50px;
            background-image: linear-gradient(90deg,skyblue,pink,yellow,orange,rgb(147, 78, 185));
            background-size: 500%;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            cursor: pointer;
            transition: all 1s;
            &:hover {
                transform: scale(1.5) rotateZ(360deg);  
                background-position-x: 100%;
                i{
                    top: 20px;
                    right: 15px;
                    color: white;
                    font-family: 'KaiTi';
                    opacity: 1;
                }
                &::before {
                    transform: scale(2);  
                    box-shadow: 0 0 rgb(28, 182, 200);   
                }
            }
            &::before{
                content: "";
                display: inline-block;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                position: absolute;
                transition: all .6s linear;
                box-shadow: 0 0 10px 10px transparent;
            }
        }
</style>